<!DOCTYPE html>
<html>
<head>
    <title>Filter / Disable items</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet">
    <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    
        <div id="example">

            <div class="demo-section k-header sortable-wrapper">
                <h4>Disable</h4>
                <p>Disabled items cannot be dragged but are valid drop targets.</p>
                <div id="sortable-disable">
                    <div class="sortable disabled">Disabled item 1</div>
                    <div class="sortable disabled">Disabled item 2</div>
                    <div class="sortable">Item 3</div>
                    <div class="sortable">Item 4</div>
                    <div class="sortable">Item 5</div>
                    <div class="sortable">Item 6</div>
                </div>
            </div>

            <div class="demo-section k-header sortable-wrapper">
                <h4>Filter</h4>
                <p>Filtered items cannot be dragged and are not valid drop targets.</p>
                <div id="sortable-filter">
                    <div class="not-sortable">Not sortable item 1</div>
                    <div class="not-sortable">Not sortable item 2</div>
                    <div class="sortable">Item 3</div>
                    <div class="sortable">Item 4</div>
                    <div class="sortable">Item 5</div>
                    <div class="sortable">Item 6</div>
                </div>
            </div>

            <script>
                $(document).ready(function() {
                    $("#sortable-filter").kendoSortable({
                        filter: ".sortable"
                    });

                    $("#sortable-disable").kendoSortable({
                        disabled: ".disabled"
                    });
                });
            </script>

            <style>
                #example {
                    -webkit-user-select: none;
                    -moz-user-select: none;
                    -ms-user-select: none;
                    user-select: none;
                }

                .sortable-wrapper {
                    width: 37%;
                    margin: 20px 40px;
                    padding: 20px;
                    float: left;
                }

                .sortable-wrapper p {
                    margin: 5px auto 20px;
                }

                .sortable, .not-sortable {
                    padding: 10px 0;
                    margin: 1px 0;
                    width: 358px;
                    text-align: center;
                    color: #ffffff;
                }

                .sortable {
                    background-color: #51A0ED;
                }

                .not-sortable {
                    background-color: #8E8E8E;
                    opacity: 0.5;
                }

                .disabled {
                    background-color: #FF0000;
                    opacity: 0.5;
                }
            </style>
        </div>


    
    
</body>
</html>
